<template>
  <el-container>
    <el-card class="box-card">
      <!-- <el-header>{{ title }}</el-header> -->
      <el-main>
        <avue-form :option="option" v-model="form" @submit="handleSubmit" @error="error"></avue-form>
      </el-main>
      <!-- <el-footer>保存</el-footer> -->
    </el-card>

  </el-container>
</template>
<script>
import { getDetail, update, } from "@/api/infoManagement/patientFile";
const validateIdCard = (rule, value, callback) => {
 const reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
  if (!reg.test(value)) {
    callback(new Error('身份证格式不正确，请重新输入'))
  } else {
    callback()
  }
}
const validatePhome = (rule, value, callback) => {
  const reg = /^(\+86)?1[3456789]\d{9}$/
  if (!reg.test(value)) {
    callback(new Error('手机号不正确，请重新输入'))
  } else {
    callback()
  }
}
export default {
  data() {
    return {
      title: '患者档案编辑',
      form: {},
      option: {
        labelWidth: 110,
        column: [
          {
            label: "姓名",
            prop: "name",

            span: 8,
            rules: [{
              required: true,
              message: "请输入患者姓名",
              trigger: "blur"
            }],
          },
          {
            label: "性别",
            prop: "sex",
            type: "radio",
            dicData: [{
              label: '男',
              value: 1
            }, {
              label: '女',
              value: 0
            }],
            rules: [{
              required: true,
              message: "请选择",
              trigger: "blur"
            }],
            span: 8
          },
          {
            label: "出生日期",
            prop: "birthday",

            type: 'date',
            hide: true,
            valueFormat: 'yyyy-MM-dd',
            span: 8,
            rules: [{
              required: true,
              message: "请选择出生日期",
              trigger: "change"
            }]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            dicUrl: '/api/blade-system/region/select',
            span: 8,
            rules: [{
              required: true,
              message: "请选择省份",
              trigger: "blur"
            }],
          },
          {
            label: '地市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['district'],
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{province}}',
            span: 8,
            rules: [{
              required: true,
              message: "请选择地市",
              trigger: "blur"
            }],
          },
          {
            label: '区县',
            prop: 'district',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicFlag: false,
            dicUrl: '/api/blade-system/region/select?code={{city}}',
            span: 8,
            rules: [{
              required: true,
              message: "请选择区县",
              trigger: "blur"
            }],
          },
          {
            label: "详细地址",
            prop: "address",
            span: 8,
            rules: [{
              required: true,
              message: "请输入详细地址",
              trigger: "blur"
            }],
          },
          {
            label: "身份证号",
            prop: "idCard",
            hide: true,
            span: 8,
            rules: [{
              required: true,
              message: "请输入身份证号",
              trigger: "blur"
            }, {
              validator: validateIdCard,
              trigger: 'blur',
            }],
          },
          {
            label: "民族",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=nation_dict",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            dataType: "number",
            slot: true,
            prop: "nation",
            search: true,
            span: 8,
            rules: [{
              required: true,
              message: "请选择民族",
              trigger: "blur"
            }]
          },
          // {
          //   label: "民族",
          //   prop: "nation",

          //   hide: true,
          //   span: 8
          // },
          // {
          //   label: "身高(cm)",
          //   prop: "height",
          //   type: 'number',
          //   hide: true,
          //   span: 8
          // },
          // {
          //   label: "体重(kg)",
          //   prop: "weight",
          //   type: 'number',
          //   hide: true,
          //   span: 8
          // },
          {
            label: "联系人",
            prop: "contacts",

            hide: true,
            span: 8
          },
          {
            label: "联系电话",
            prop: "telephone",
            hide: true,
            span: 8,
            type: 'number',
            rules: [{
              required: true,
              message: "请输入联系电话",
              trigger: "blur"
            }, {
              validator: validatePhome,
              trigger: 'blur',
            }],
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            span: 12,
            minRows: 6,
          },

        ]
      }
    }
  },
  created() {
    this.form.id = this.$route.query.id
    getDetail(this.form.id).then(res => {
        const self=this
        const data=res.data.data
        self.form = data
        debugger
        const arr = data.addressCode && data.addressCode.split(',')
        if (arr) {
          self.form.province = arr[0]
          self.form.city = arr[1]
          self.form.district = arr[2]
        }
      });
  },
  methods: {
    handleSubmit(form, done) {
      console.log('患者档案编辑', JSON.stringify(form))
      // {"name":"李四","sex":1,"birthday":"2023-03-06","nation":"汉","idCard":"66","height":"180","weight":"60","age":1,"contacts":"张飞","telephone":"180","createTime":"2023-03-10 00:00:00","status":1,"address":"西安"}
      const item = {
        ...form,
        province: null,
        city: null,
        district: null,
        addressCode: `${form.province},${form.city},${form.district}`
      }
      update(item).then(() => {
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        this.$router.push({
          path: '/infoManagement/patientFile/index'
        })
        done();
      }, error => {
        window.console.log(error);
      });
    },
    error(err) {
      // this.$message.success('请查看控制台');
      console.log(err)
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  /* height: 590px; */
}
</style>